<template>
  <div class="login-container">
    <div class="login-form-wrap">
      <!-- logo区域 -->
      <div class="login-head">
        <div class="logo"></div>
      </div>
      <!-- 表单区域 -->
      <el-form ref="loginForm" :model="form" class="login-form" :rules="rules">
        <el-form-item prop="mobile">
          <el-input v-model="form.mobile" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input
            v-model="form.code"
            placeholder="密码"
            show-password
          ></el-input>
        </el-form-item>
        <!-- <el-form-item prop="isAgree"> -->
        <el-form-item>
          <el-checkbox
            label="我已阅读并同意用户协议和隐私条款"
            name="type"
            v-model="isAgree"
          ></el-checkbox>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            class="login-btn"
            @click.prevent="handleLogin"
            :loading="isLoading"
            >{{ isLoading ? "登录中" : "登录" }}</el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
// import axios from "axios";
export default {
  data () {
    // const validator = (rule, value, callback) => {
    //   // console.log(value);
    //   if (!value) {
    //     callback(new Error("请同意协议"));
    //     return;
    //   }
    //   callback();
    // };
    return {
      isAgree: false,
      form: {
        mobile: '13911111111',
        code: '246810'
        // isAgree: false,
      },
      isLoading: false,

      rules: {
        mobile: [
          { required: true, message: '必填，请输入数字', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '用户手机号格式不对，请输入数字',
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '必填，请输入数字', trigger: 'blur' },
          {
            pattern: /^\d{6}$/,
            message: '验证码格式不对，请输入数字',
            trigger: 'blur'
          }
        ]
        // isAgree: [{ validator: validator, trigger: "change" }],
      }
    }
  },
  methods: {
    handleLogin () {
      // console.log(12);
      if (!this.isAgree) {
        // console.log(this.isAgree);
        this.$message.warning('请同意协议')
        return
      }
      this.$refs.loginForm.validate(async valid => {
        // console.log(valid);
        // if (valid) {
        //   this.isLoading = true

        //   // axios
        //  const res =  await this.$http
        //     .post(
        //       "/mp/v1_0/authorizations",
        //       this.form
        //     )
        //     // .then((resp) => {
        //     //   // console.log(resp.data.data.token);
        //       localStorage.setItem('token',res.data.data.token)
        //       this.$message.success("登录成功");
        //       setTimeout(() => {
        //         this.$router.push(this.$route.query.redirect||"/");
        //       }, 500);
        //     //   //  setTimeout(() => {
        //     //   //   this.$router.push("/");
        //     //   // }, 500);
        //       this.isLoading = false
        //     // })
        //     // .catch((err) => {
        //     //   console.log(err.message);
        //     //   this.$message.error("登录失败" + err.response.data.message || "未知错误");
        //     //   this.isLoading = false;
        //     // });

        // }
        if (valid) {
          this.isLoading = true
          // try{ 包裹可能出现报错代码 } catch(e){ try包裹代码报错会执行 }

          try {
            const res = await this.$http.post('/mp/v1_0/authorizations', this.form)
            // 代码走到这里，代表成功
            this.$message.success('登陆成功~')
            window.localStorage.setItem('token', res.data.data.token)
            this.isLoading = false
            this.$router.push(this.$route.query.redirect || '/')
          } catch (e) {
            // e 是错误对象，e.response 获取错误的响应，拿到后的错误信息
            // 请求报错，走这里
            // console.log(e.response);
            this.$message.error('登陆失败,' + e.response.data.message || '未知错误')
            this.isLoading = false
          }
        } else {
          alert('检查格式')
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
// 铺满整屏
.login-container {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: url("../../assets/image/login_bg.jpg") no-repeat;
  background-size: cover;
  .login-form-wrap {
    min-width: 300px;
    padding: 30px 50px 10px;
    background-color: #fff;
    .login-head {
      display: flex;
      justify-content: center;
      .logo {
        width: 200px;
        height: 57px;
        background: url("../../assets/image/logo_index.png") no-repeat;
        background-size: contain;
      }
    }
    .login-form {
      .login-btn {
        width: 100%;
      }
    }
  }
}
</style>
